<script setup lang="tsx">
import { onBeforeUnmount, onMounted, ref } from 'vue'

defineOptions({
  name: 'Clock',
})

let timeInterval: any
const clockContainerRef = ref<HTMLDivElement>()

onMounted(() => {
  // 获取当前时间
  const now = new Date()
  const hour = now.getHours()
  const minute = now.getMinutes()
  const second = now.getSeconds()
  // 计算初始角度
  let hourAngle = (hour % 12) * 30 + minute * 0.5
  let minuteAngle = minute * 6
  let secondAngle = second * 6
  // 设置初始角度
  const hourHand = clockContainerRef.value?.querySelector(
    'div[name="hourHand"]',
  ) as HTMLDivElement
  const minuteHand = clockContainerRef.value?.querySelector(
    'div[name="minuteHand"]',
  ) as HTMLDivElement
  const secondHand = clockContainerRef.value?.querySelector(
    'div[name="secondHand"]',
  ) as HTMLDivElement
  hourHand.style.transform = `rotate(${hourAngle}deg)`
  minuteHand.style.transform = `rotate(${minuteAngle}deg)`
  secondHand.style.transform = `rotate(${secondAngle}deg)`
  timeInterval = setInterval(() => {
    // 更新角度
    hourAngle += 0.00833333333 // 每秒钟时针转动1/120度（360度/12小时/60分钟/60秒）
    minuteAngle += 0.1 // 每秒钟分针转动6度（360度/60分钟/60秒）
    secondAngle += 6 // 每秒钟秒针转动6度（360度/60秒）

    // 应用变换
    hourHand.style.transform = `rotate(${hourAngle}deg)`
    minuteHand.style.transform = `rotate(${minuteAngle}deg)`
    secondHand.style.transform = `rotate(${secondAngle}deg)`
  }, 1000) // 每秒钟更新一次
})
onBeforeUnmount(() => {
  if (timeInterval)
    clearInterval(timeInterval)
  timeInterval = null
})
</script>

<template>
  <div ref="clockContainerRef" class="clock-container">
    <p class="v-index">
      II
    </p>
    <p class="h-index">
      II
    </p>
    <div class="hand">
      <div class="hand">
        <div name="hourHand" class="hour" />
        <div name="minuteHand" class="minute" />
        <div name="secondHand" class="second" />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.clock-container {
  transform: scale(0.5);
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  outline: 10px solid #333;
  background: repeating-radial-gradient(
      circle at 50% 50%,
      rgba(200, 200, 200, 0.2) 0%,
      rgba(200, 200, 200, 0.2) 2%,
      transparent 2%,
      transparent 3%,
      rgba(200, 200, 200, 0.2) 3%,
      transparent 3%
    ),
    conic-gradient(
      white 0%,
      silver 10%,
      white 35%,
      silver 45%,
      white 60%,
      silver 70%,
      white 80%,
      silver 95%,
      white 100%
    );
  box-shadow: inset 0 0 20px #0007;
}

.hour {
  position: absolute;
  width: 5px;
  height: 60px;
  background: #aaa;
  left: 87.5px;
  top: 43px;
  border-radius: 3px 3px 1px 1px;
  transform-origin: 2px 47px;
  box-shadow:
    0 0 5px #0005,
    inset 1.5px 3px 0px #333,
    inset -1.5px -3px 0px #333;
  z-index: 1;
  // animation: watch 43200s linear infinite;
}

.minute {
  position: absolute;
  width: 4px;
  height: 78px;
  background: #aaa;
  left: 88px;
  top: 25px;
  border-radius: 3px 3px 1px 1px;
  transform-origin: 2px 65px;
  box-shadow:
    0 0 5px #0005,
    inset 1.5px 3px 0px #333,
    inset -1.5px -3px 0px #333;
  z-index: 2;
  // animation: watch 3600s linear infinite;
}

.second {
  position: absolute;
  width: 10px;
  height: 10px;
  background: red;
  left: 85px;
  top: 85px;
  border-radius: 50%;
  border: 1px solid #eee;
  z-index: 3;
  // animation: watch 60s steps(60, end) 0s infinite;
}

.second::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 85px;
  left: 3px;
  bottom: -10px;
  background: red;
  border-radius: 2px;
  box-shadow: 5px 0 2px rgba(128, 128, 128, 0.2);
}

.second::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  left: 2px;
  top: 2px;
  background: #555;
  border-radius: 50%;
}

.v-index {
  position: absolute;
  color: #333;
  font-size: 24px;
  left: 83.5px;
  top: -3px;
  text-shadow: 0 157px 0 #333;
  z-index: 1;
}

.h-index {
  position: absolute;
  color: #333;
  font-size: 24px;
  top: 72px;
  left: 5px;
  transform: rotate(-90deg);
  text-shadow: 0 158px 0 #333;
  z-index: 1;
}

@keyframes watch {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
